<template>
    <div id="goodsedit">
            <div class="navtop">
                <el-tabs value="first" @tab-click="handleClick" >
                    <el-tab-pane label="基本信息" name="first">
                    </el-tab-pane>
                    <el-tab-pane label="规格参数" name="second" >
                    </el-tab-pane>
                    <el-tab-pane label="图文详情" name="third">
                    </el-tab-pane>
                    <el-tab-pane label="售后质保" name="four">
                    </el-tab-pane>
                    <el-tab-pane label="参照对标" name="five">
                    </el-tab-pane>
                </el-tabs> 
            </div> 
            <div class="footerconfirm">
                                <el-button type="primary" @click="saveForm('form')" v-if='bianji'>确认修改</el-button>
                                <el-button type="warning" v-if='bianji' @click="back">返回</el-button>
                                <el-button type="primary" @click="saveForm('form','ONTHESHELF')" v-if='!bianji'>上架</el-button>
                                <el-button type="info" @click="saveForm('form')" v-if='!bianji'>待售</el-button>
                                <el-button type="warning" v-if='!bianji'>清空</el-button>
            </div>

        
<div class="form_wrap" >
<el-form ref="form"  :model="goods" label-width="100px" >
            <div ref="form1">
                   <el-header>基本信息</el-header>
                   <el-row>
                      <el-col :span="12">
                        <el-form-item label="商品类目" prop="twoCatalog" :rules="[{ required: true, message: '请选择商品类目', trigger: 'blur' }]">
                              <el-select v-model="productCategoryId" placeholder="请选择商品一级目录"  @change='getmenuSec'>
                                  <el-option
                                    v-for="item in headeroptions"
                                    :key="item.id"
                                    :label="item.typeName"
                                    :value="item.id"
                                    ></el-option>
                              </el-select>
                              <el-select v-model="goods.twoCatalog" placeholder="请选择商品二级目录">
                                  	<el-option
                                    v-for="item in headerSecond"
                                    :key="item.id"
                                    :label="item.typeName"
                                    :value="item.id"
                                    ></el-option>
                              </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12"> 
                             <el-form-item label="上传搜索页缩略图" prop="thumbnail" :rules="[ { required: true, message: '请上传图片', trigger: 'blur' }]">
                                  <div class="el-flex" >
                                      <pictureview  @add-parent-img='handleImgSuccess' :selectedImg="imgUrl+goods.thumbnail"></pictureview>
                                  </div>
                              </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row>
                      <el-col :span="12">
                          <el-form-item label="商品品牌"  prop="brand" :rules="[{ required: true, message: '商品品牌不能为空', trigger: 'blur' }]">
                                     <el-input v-model="goods.brand"></el-input>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12"> 
                              <el-form-item label="上传详情页 主图1" prop="masterGraphOne" :rules="[ { required: true, message: '请上传图片', trigger: 'blur' }]">
                                  <div class="el-flex">
                                      <pictureview  @add-parent-img='handleImgSuccessTwo' :selectedImg="imgUrl+goods.masterGraphOne"></pictureview>
                                  </div>
                              </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row>
                      <el-col :span="12"> 
                             <el-form-item label="商品名称" prop="name" :rules="[{ required: true, message: '商品名称不能为空', trigger: 'blur' }]">
                                <el-input v-model="goods.name"></el-input>
                             </el-form-item>
                      </el-col>     
                      <el-col :span="12"> 
                              <el-form-item label="上传详情页 主图2" prop="masterGraphTwo" :rules="[{ required: true, message: '请上传图片', trigger: 'blur' }]">
                                  <div class="el-flex">
                                      <pictureview  @add-parent-img='handleImgSuccessThree' :selectedImg="imgUrl+goods.masterGraphTwo"></pictureview>
                                  </div>
                              </el-form-item>
                      </el-col>
                    </el-row>

                      <el-row>
                      <!-- <el-col :span="12"> 
                             <el-form-item label="商品编码" prop="sn" :rules="[{ required: true, message: '商品编号', trigger: 'blur' }]">
                                <el-input v-model="goods.sn"></el-input>
                             </el-form-item>
                      </el-col>     -->
                        <el-col :span="12"> 
                          <el-form-item label="卖点"  prop="sellingPoint" :rules="[{ required: true, message: '请填写此商品卖点', trigger: 'blur' }] ">
                              <el-input v-model="goods.sellingPoint" placeholder="最多10个字"></el-input>
                          </el-form-item>
                      </el-col> 
                   
                    </el-row>
                    <el-row>
                      <el-col :span="24"><div class=" bg-purple-dark jiaoyi">交易信息</div></el-col>
                      <el-col :span="12"><div class="">第一行默认为主打款</div></el-col>
                      <el-col :span="12" :push="10"><el-button type="primary" @click="addListGroup" >增加款式</el-button></el-col>
                    </el-row>

                    <el-table :data="tableData"  Checkbox border style="width: 100%;margin-bottom:15px;" fit ref="multipleTable" :default-sort="{prop:'sort_num'}" @cell-mouse-enter="handleSelectCell">
                      <el-table-column prop="sort_num" width="50" label="序号" type="index" :rules="[{ required: true, message: '请上传图片', trigger: 'blur' }]">
                      </el-table-column>
                      <el-table-column prop="name" label="款式名称" width="200">
                               <template slot-scope="scope">
                                  <el-input v-model="scope.row.name"></el-input>
                                </template>
                      </el-table-column>
                        <el-table-column prop="number" label="商品编码" width="200">
                               <template slot-scope="scope">
                                  <el-input v-model="scope.row.number"></el-input>
                                </template>
                      </el-table-column>
                      <el-table-column prop="price" label="单价(元)">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.price"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="stock" label="库存数">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.stock"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="stockUnit" label="单位">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.stockUnit"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="minOrders" label="最小起订量" width="100">
                        <template slot-scope="scope">
                              <el-input v-model="scope.row.minOrders"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="dealUnit" label="单位">
                        <template slot-scope="scope">
                          <el-input v-model="scope.row.dealUnit"></el-input>  
                        </template>
                      </el-table-column>
                      <el-table-column prop="deliveryPeriod" label="交货期" width="90">
                           <template slot-scope="scope">
                             <el-input v-model="scope.row.deliveryPeriod"></el-input>
                          </template>
                      </el-table-column>
                        <el-table-column prop="productTime" label="生产日期" width="250">
                           <template slot-scope="scope">
                            <el-date-picker
                              v-model="scope.row.productTime"
                              type="datetime"
                              placeholder="选择日期时间"
                              align="right"
                              :picker-options="pickerOptions1"
                              value-format='yy-MM-dd'>
                            </el-date-picker>
                        </template>
                      </el-table-column>
                      <el-table-column prop="thumbnail" label="缩略图" width="140">
                        <template slot-scope="scope">
                           <pictureview type="upload" :indexImg='scope.$index'   @add-parent-img='handleImgSuccessTable' :selectedImg="scope.row.thumbnail&&imgUrl+scope.row.thumbnail" ></pictureview>
                        </template>
                      </el-table-column>
                      <el-table-column label="删除" width="60" fixed="right" >
                            <template slot-scope="scope">
                        <el-button type="danger" @click="batchRemove(scope.$index, scope.row)" icon="el-icon-delete" circle></el-button>
                           </template>
                      </el-table-column>
                    </el-table>
                    <el-row>
                      <el-col :span="12">
                          <el-form-item label="备注"  prop="remark"  :rules="[{ message: '请填写此商品备注', trigger: 'blur' }] " >
                              <el-input v-model="goods.remark"></el-input>
                          </el-form-item>
                      </el-col>
                    
                    </el-row>
            </div>     
            <div  ref="form2">
                    <el-container>
                    <el-header>规格参数</el-header>
                     <el-row :gutter="20">
                      <el-col :span="12" >
                             <el-table :data="canshutableData"  >
                                <el-table-column  label="序号" width="30" type="index">
                                </el-table-column>
                                <el-table-column prop="name" label="参数名称" width="180">
                                     <template slot-scope="scope" >
                                            <el-input v-model="scope.row.name"></el-input>
                                      </template>
                                </el-table-column>
                                <el-table-column prop="canshu" label="参数">
                                   <template slot-scope="scope" prop="value">
                                        <el-input v-model="scope.row.value"></el-input>
                                  </template>
                                </el-table-column>
                            </el-table>
                      </el-col>
                      <el-col :span="12">
                                <el-table :data="canshutableDatas" >
                                    <el-table-column prop="date" label="序号" width="30" type="index">
                                    </el-table-column>
                                    <el-table-column prop="name" label="参数名称" width="180">
                                              <template slot-scope="scope">
                                                    <el-input v-model="scope.row.name"></el-input>
                                              </template>
                                    </el-table-column>
                                    <el-table-column prop="address" label="参数">
                                            <template slot-scope="scope">
                                                  <el-input v-model="scope.row.name"></el-input>
                                            </template>
                                    </el-table-column>
                                </el-table>
                      </el-col>
                    </el-row>
                    </el-container>
            </div>
          <div  ref="form3" class="form3">  
                <el-header>图文详情</el-header>
                <tinymce class="editor" v-model="goods.describe"  :setting="editorSetting1"></tinymce>
          </div>  
            <div  ref="form4" class="clearfix">  
                <el-container>
                  <el-header>售后质保</el-header>
                      <el-main>
                          <el-row  :gutter="20">
                              <el-col :span="24"><div class="grid-content bg-purple"> 质保期 <el-input type="number" v-model="goods.warrantyPeriod" ></el-input>个月</div></el-col>
                              <el-col :span="12"><div class="grid-content bg-purple">质量承诺</div></el-col>
                              <el-col :span="12"><div class="grid-content bg-purple-light">售后承诺</div></el-col>
                              <el-col :span="12">
                                      <tinymce2 class="editor2" v-model="goods.qualityCommitment"  :setting="editorSetting2"></tinymce2>
                              </el-col>
                              <el-col :span="12">
                                      <tinymce3 class="editor3"  v-model="goods.aftersaleCommitment"  :setting="editorSetting2"></tinymce3>
                                      
                              </el-col>
                          </el-row>    

                      </el-main>
                </el-container>
            </div>
          <div ref="form5" class="clearfix form5">
                <el-header>参数对标</el-header>
                    <el-row>
                        <el-col :span="16"><div class="grid-content bg-purple"> 该商品在其他电商有销售， 对比凸显在 傻傻平台 购买的超值优惠</div>
                        </el-col>
                        <el-col :span="2" :push="6"><el-button type="primary" @click="addCompareGroup" >增加对标</el-button></el-col>
                    </el-row>
                            <el-table :data="comparetableData"  border style="width: 100%"  ref="comparetableData" >
                                <el-table-column width="60" label="序号" prop="id" type='index'>
                                </el-table-column>
                                <el-table-column label="电商名称" prop="name" >
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.name"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column label="售价">
                                    <template slot-scope="scope"  prop="price" >
                                        <el-input v-model="scope.row.price"></el-input>
                                    </template>
                                </el-table-column>
                                   <el-table-column label="销量" prop="sales" >
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.sales"></el-input>
                                    </template>
                                </el-table-column>
                                   <el-table-column label="单位" prop="unit" >
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.unit"></el-input>
                                    </template>
                                </el-table-column>
                                   <el-table-column label="上传截图"  >
                                    <template slot-scope="scope">
                                       <pictureview type="upload" :indexImg='scope.$index'  @add-parent-img='handleImgSuccessCanshu' :selectedImg="scope.row.image&&imgUrl+scope.row.image"  ></pictureview>
                                    </template>
                                </el-table-column>
                            </el-table>
            </div>  
</el-form>
          </div>
</div>
</template>

<script>
import tinymce from "@/components/my-components/tinymce/tinymce";
// import tinymce1 from "@/components/my-components/tinymce/tinymce1";
import tinymce2 from "@/components/my-components/tinymce/tinymce2";
import tinymce3 from "@/components/my-components/tinymce/tinymce3";
import pictureview from "@/components/my-components/pictureview/index";
import Qs from 'qs'

export default {
  data: function() {
    return {
      headeroptions: [],
      headerSecond: [],
      goods: {
        twoCatalog: "",
        brand: "",
        name: "",
        thumbnail: "",
        masterGraphOne: "",
        masterGraphTwo: "",
        remark: "",
        sellingPoint: "",
        describe: "",
        warrantyPeriod: "",
        qualityCommitment: "",
        aftersaleCommitment: "",
        style: "",
        parameter: "",
        reference: ""
      },
      productCategoryId: "",
      productCategoryIdkey: "",
      twoCatalogkey:"",
      editorSetting1: {
        height: 500
      },
      editorSetting2: {
                height: 300,
                // language_url: "langs/zh_CN.js",
                block_formats: "Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;"
      },
      editorSetting3: {
        // height: 300
      },
      parameterValue: [],
      attributes: [],
      attributesStr: [],
      checkedAttributes: [],
      checkedAttributesStr: [],
      checkedAttributesArr: [],
      specifications: [],
      specificationsTableData: [],
      selectedSpecification: {},
      isMarketable: true,
      tableData: [{}],
      addtableList:{},
      addList: [
        { name: "" },
        { number: "" },
        { price: "" },
        { stock: "" },
        { stockUnit: "" },
        { minOrders: "" },
        { dealUnit: "" },
        { deliveryPeriod: "" },
        { productTime: "" },
        { thumbnail: "" }
      ],
      canshutableData: [],
      XGcanshutableData: [],
      canshuAddList: [{ name: "" }, { value: "" }],
      canshutableDatas: [{}, {}, {}, {}, {}, {}, {}, {}],
      comparetableData: [{}, {}, {}],
      XGcomparetableData: [],
      productPage: {
        pageNumber: 1,
        pageSize: 10
      },
      selectedGoods: {},
      cstableData: [
        {
          date: "",
          name: "",
          address: ""
        }
      ],
      sort_num: [],
      value2: "",
      pickerOptions1: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      tabType: 0,
      scrollHeight: 0,
      activeName: "1"
    };
  },
  components: {
    tinymce,
    tinymce2,
    tinymce3,
    pictureview,
  },
  methods: {
    getmenu() {
      //一级目录
      this.$axios.get("/one9-web/goodsType/oneType").then(res => {
        if (res.code = "OK") {
          this.headeroptions = res.data;
        }
      });
    },
    getmenuSec() {
      //二级目录
      // const Qs = require("qs");
      if (this.productCategoryId)
        this.$axios
          .get("/one9-web/goodsType/twoType?upperLevel=" + this.productCategoryId)
          .then(res => {
            if ((res.code = "OK")) {
              this.headerSecond = res.data;
            }
          });
    },
    canshuData(index, row) {
      // let parameterGroup = {name:'',value:''};
      var len=this.canshutableData.length||0;
      for (var i = 0; i < 10-len; i++) {
        if (row != null) {
          this.canshuAddList = row;
        } else {
          this.canshuAddList = {};
        }
        this.canshutableData.push(this.canshuAddList);
      }
      // this.canshutableData=arrcanshu;
      // this.$set(this.canshutableData, "name", '');
      // this.$set(this.canshutableData, "value", '');
    },
    saveForm(formName,state) {
              const Qs = require("qs");
              //  Qs.stringify(   `data=${JSON.stringify(this.goods)}`
              this.goods.style = JSON.stringify(this.tableData);
              // console.log(state)
              if(state){
                this.$set(this.goods,'state', state);
              }
              // console.log(this.canshutableData)
              // const a=this.canshutableData;
              for (let o in this.canshutableData) {
                // console.log(o)
                let oobj = this.canshutableData[o];
                if (this.isNull(oobj)) {
                  // a.splice(o,1,null);
                  // this.canshutableData=a;
                } else {
                  this.$set(this.XGcanshutableData, o, this.canshutableData[o]);
                }
              }
              // console.log(this.XGcanshutableData)
              this.goods.parameter = JSON.stringify(this.XGcanshutableData);

              // const b=this.canshutableData;
              for (let o in this.comparetableData) {
                // console.log(o)
                let ooobj = this.comparetableData[o];
                if (this.isNull(ooobj)) {
                  // a.splice(o,1,null);
                  // this.canshutableData=a;
                } else {
                  this.$set(this.XGcomparetableData, o, this.comparetableData[o]);
                }
              }
              // console.log(JSON.stringify(this.XGcomparetableData));
              this.goods.reference = JSON.stringify(this.XGcomparetableData);
              console.log(Qs.stringify(this.goods));
              this.$refs[formName].validate(valid => {
                if (valid) {
                  if(!!this.$route.query.id){
                        this.$axios.post("/one9-web/goods/updateGoods",
                            Qs.stringify(this.goods)
                          ).then(res => {
                            if (res.code == "OK") {
                              this.$message.success("保存成功")
                            } else {
                              alert(res.msg);
                            }
                          });
                  }else{
                       this.$axios.post("/one9-web/goods/addGoods",
                        Qs.stringify(this.goods)
                      ).then(res => {
                        if (res.code == "OK") {
                          this.$message.success("上架成功")
                        } else {
                          alert(res.msg);
                        }
                      });
                  }
                  //             this.$message.success('保存成功');
                } else {
                  console.log("error submit!!");
                  return false;
                }
              });
    },
    isNull(obj) {
      for (var key in obj) {
        return false;
      }
      return true;
    },
    handleImgSuccess(picture) {
      // this.$set(this.goods,"thumbnail_temp",res.url)
      this.$set(this.goods, "thumbnail", picture.id);
    },
    handleImgSuccessTwo(picture) {
      // this.$set(this.goods,"thumbnail_temp",res.url)
      this.$set(this.goods, "masterGraphOne", picture.id);
    },
    handleImgSuccessThree(picture) {
      // console.log(picture)
      this.$set(this.goods, "masterGraphTwo", picture.id);
    },
    handleImgSuccessTable(picture) {
      // console.log(picture)
      this.$set(this.tableData[picture.index], "thumbnail", picture.id);
    },
    handleImgSuccessCanshu(picture) {
      // console.log(picture)
      this.$set(this.comparetableData[picture.index], "image", picture.id);
    },
    handleDelete(index, row) {
      let goods = row;
      goods.active = true;
      for (let o in this.tableData) {
        if (this.tableData[o].id == row.id) {
          this.tableData.splice(o, 1);
          break;
        }
      }
      this.saveGoods(goods);
    },
    handleSort(index, row) {
      this.$set(this.tableData, 0, this.tableData[0]);
      this.saveGoods(row);
    },
    handleSelectCell(row, column, cell, event) {
      this.selectedGoods = row;
    },
    addListGroup(index, row) {
      //交易信息  增加款式
      // console.log(index,row)
      if (row != null) {
        this.addtableList = row;
      } else {
        this.addtableList = {};
      }
      console.log(JSON.stringify(this.addtableList));
     this.tableData.push(this.addtableList);
    },
    addCompareGroup() {
      //参数对标信息增加
      let compareGroup = {};
      // compareGroup.name = "";
      // parameterGroup.parameterGroup = [];
      this.comparetableData.push(compareGroup);
      console.log(this.tableData);
    },
    removeParameterGroup(index) {
      console.log("index" + index);
      this.parameterValue.splice(index, 1);
    },
    jiben(tab, event) {
      console.log(tab, event);
      alert(123);
    },
    handleScroll(element) {
      var content = document.querySelector(".content");
      // var scrollTop=content.pageYOffset||content.scrollTop;
      this.scrollHeight = element.offsetTop;
      console.log(this.scrollHeight);
      var _this = this;
      setTimeout(() => {
        content.scrollTo({ behavior: "smooth", top: _this.scrollHeight - 104 });
      }, 0);
      // console.log(scrollTop)
    },
    handleClick(tab, e) {
      //点击选项卡
      this.tabType = tab.index;
      var _val = tab.index; //
      this.getWaterDetails(_val);
    },
    getWaterDetails(val) {
        //tab0
      if (val == 0) {
        var ele1 = this.$refs.form1;
        this.handleScroll(ele1);
      }
      if (val == 1) {
        //tab1
        var ele2 = this.$refs.form2;
        this.handleScroll(ele2);
      }
      if (val == 2) {
        var ele3 = this.$refs.form3;
        this.handleScroll(ele3);
      }
      if (val == 3) {
        var ele4 = this.$refs.form4;
        this.handleScroll(ele4);
      }
      if (val == 4) {
        var ele5 = this.$refs.form5;
        this.handleScroll(ele5);
      }
    },
    batchRemove(index, row) {
      var ids = this.tableData.map(item => item.id).toString();
      let arrids = ids.split(",");
      this.$confirm("确认删除该项吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          this.listLoading = true;
          console.log(index);
          if(this.$route.query.id){
                  this.$axios.post( '/one9-web/goods/deleteStyle?id='+ arrids[index]).then((res) => {
                    this.$message({
                      message: "删除成功",
                      type: "success"
                    });
                  });
            this.tableData.splice(index, 1);

          }else{
            this.tableData.splice(index, 1);
               this.$message({
                            message: "删除成功",
                            type: "success"
                          });
                }
            
        })
        .catch(() => {});
    },
    basicInfo() {
      this.$axios.get("/one9-web/goods/getfindGoods?id=" + this.$route.query.id)
        .then(res => {
          if (res.code = "OK") {
            // console.log(res.data);
           
            // Promise.all([  , this.getmenuSec(), ])
            // .then(function(results){
            //     console.log(results);
            // });
          var _this=this;
         new Promise(function(resolve,reject){
              _this.getmenu();
              _this.goods = res.data[0];
              resolve();
          }).then(function(data){
              // _this.productCategoryIdkey=res.data[0].oneCatalog;
              // resolve();  
          }).then(function(data){
              _this.productCategoryIdkey=_this.goods.oneCatalog;
              // alert(_this.productCategoryIdkey)
              // resolve();  
          }).then(function(data){
              let ids=_this.headeroptions.find(item => item.id=_this.productCategoryIdkey);
              _this.productCategoryId=ids.id;
              // alert(JSON.stringify(ids), _this.productCategoryId);
              // console.log(2)
          }).then(function(data){
              _this.getmenuSec();
              // console.log(3)
          }).then( function(data){
              _this.twoCatalogkey=_this.goods.twoCatalog;
            // console.log(4)
          }).then( function(data){
            let idss=_this.headerSecond.find(item => item.id=_this.twoCatalogkey);
            console.log(_this.headerSecond,idss)
            // _this.goods.twoCatalog=idss.id;
          })
            // this.twoCatalogkey= res.data[0].twoCatalog;
            // this.goods.twoCatalog=this.headerSecond.find(item => item.id=this.twoCatalogkey);
            // console.log(this.productCategoryId,this.goods.twoCatalog)

          }
        });
    },
    styleInfo(){
         this.$axios.get("/one9-web/goods/getFindStyle?id=" + this.$route.query.id)
        .then(res => {
          if (res.code = "OK") {
            console.log(res.data);
            this.tableData = res.data;
          }
        });
    },
    parameterInfo(){
         this.$axios.get("/one9-web/goods/getFindParameter?id=" + this.$route.query.id)
        .then(res => {
          if (res.code = "OK") {
            console.log(res.data);
            this.canshutableData = res.data;
            this.canshuData();
          }
        });
    },
    ReferenceInfo(){
           this.$axios.get("/one9-web/goods/getFindReference?id=" + this.$route.query.id)
          .then(res => {
            if (res.code = "OK") {
              // console.log(res.data);
              this.comparetableData = res.data;
            }
          });
    },
    back(){
      this.$router.go(-1);
    }
    
  },
  watch: {},
  computed: {
       bianji(){
         if( this.$route.query.id){
              return  true
         }else{
              return  false
         }
      }
  },
  created() {
        this.getmenu();
        this.canshuData();
        if (this.$route.query.id) {
            this.basicInfo();
            this.styleInfo();
            this.parameterInfo();
            this.ReferenceInfo();
        }else{
        };
  },
  mounted() {
    // console.log(this.$route.query.id)
    // if (this.$route.query.id) {
      //  const res={"msg":"成功","code":0,"data":{"isRecommend":1,"thumbnail":"upload/img/u/2018/08/14/JYIP.png","marketPrice":1111.0,"modifyDate":"2018-08-14 16:11:24","isMarketable":true,"caption":"aaaaa","active":false,"thumbnail_temp":"http://gongzhen.site/admin/upload/img/u/2018/08/14/JYIP.png","parameterValue":"[]","sales":0,"pictures":[],"productAttribute":[],"productCategoryId":8,"price":20.0,"sort_num":1,"name":"ttttt","id":9,"sn":"123123123","stock":100,"category":"电脑","introduction":null,"createDate":"2018-07-29 15:47:20"}};
        // this.goods = res.data;
    // }
    // alert(this.bianji)
    // document.querySelector('.content').addEventListener('scroll',this.handleScroll)
  },
  destoryed() {
    // window.removeEventListener('scroll',this.handleScroll)
  }
};
</script>
<style>
.attribute_group {
  height: 30px;
}
.attribute_group .attribute_title {
  text-align: right;
}
.el-tag {
  margin-right: 5px;
}
.specificationsImg .el-upload,
.specificationsImg .el-upload .avatar-uploader-icon {
  width: 80px;
  height: 80px;
  line-height: 80px;
}
.specifications_title {
  height: 30px;
}
/* .el-form--inline .el-form-item{width: 50%;} */
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  /* line-height: 60px; */
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 50px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
/* .el-input{width: 100px;} */
.content .el-header {
  height: 30px !important;
  line-height: 30px;
  margin-bottom: 10px;
}
/* .content  .el-input{width: 200px;} */
/* label.el-form-item__label { */
/* .el-input{width: 100px;} */
.content .el-header {
  height: 30px !important;
  line-height: 30px;
  margin-bottom: 10px;
}
/* .content  .el-input{width: 200px;} */
label.el-form-item__label {
  line-height: 30px;
}
.jiaoyi {
  text-align: center;
  color: #909399;
  line-height: 40px;
  font-size: 20px;
  border-bottom: 1px solid #909399;
}
/* } */
.content .el-col-12 {
  width: 50%;
  color: #909399;
  line-height: 40px;
  margin: 10px 0;
}
.bg-purple .el-input {
  width: 150px;
}
.grid-content {
  text-align: left;
}
.navtop {
  position: absolute;
  top: 30px;
  left: 0;
  padding-left: 50px;
  right: 15px;
  background: #f0f0f0;
  z-index: 10;
  padding-top: 10px;
}
.form_wrap {
  padding: 50px 0;
}
.footerconfirm {
  position: absolute;
  top: 25px;
  text-align: right;
  /* background: #f0f0f0; */
  padding: 10px;
  z-index: 11;
  /* width: 300px; */
  right: 0;
  padding-right: 70px;
}
.clearfix:after {
  content: " ";
  display: block;
  line-height: 0;
  height: 0;
  visibility: hidden;
  clear: both;
}
.form3 {
  padding-bottom: 30px;
}
.el-collapse-item__header {
  text-align: center;
  background: #bfcbd9;
  height: 30px;
  margin-bottom: 10px;
  line-height: 30px;
}
.el-collapse-item__arrow {
  line-height: 30px;
}
.navtop .el-tabs__nav-wrap {
  padding-left: 25%;
}
.form5 .el-row {
  line-height: 40px;
  margin-bottom: 10px;
}
@media (max-width:1300px) and (min-width:1000px){
  .navtop .el-tabs__nav-wrap{padding-left: 15% !important;}
}
@media (max-width:1000px) {
  .navtop .el-tabs__nav-wrap{padding-left:0% !important;}
}
</style>
